<template>
  <div>
    <div class="pati_box">
      <div class="pati_box_item" :class="{ active: idx == item.hospPatientId }" v-for="(item, index) in patiList"
           @click="selectPati(index, item)">
        <div>
          <div class="user">
            <img src="@/assets/img/icon_boy.png" alt="" class="userImg" v-if="item.sex == 1"/>
            <img src="@/assets/img/icon_girl.png" alt="" class="userImg" v-else/>

            <span>{{ item.name }}</span>
          </div>
          <!-- <div>就诊卡号：{{ item.hospPatientId }}</div> -->
          <div>手&nbsp;&nbsp;机&nbsp;号：{{ item.mobile }}</div>
          <div>身份证号：{{ item.idNo }}</div>
        </div>
        <!-- <div>
  <img src="@/assets/img/icon_qr code@2x.png" alt="" class="qrImg" />
</div> -->
        <img src="@/assets/img/selected@2x.png" alt="" class="selectImg" v-if="idx == item.hospPatientId"/>
      </div>
    </div>
    <div style="height: 5rem;"></div>

    <div class="signCon" @click="goScan">
      去签到
    </div>
  </div>
</template>
<script>
import {getPatientList, getWxSign, getLoginUserInfo} from "@/api/api";
import {
  getToken, removeToken,
  removeWxUserinfoCookies
} from "@/api/auth";

export default {
  components: {},
  data() {
    return {
      patiList: [],
      idx: null,
      userInfo: null,
      isLogin: false,
    };
  },
  async mounted() {

  },
  created() {
    this.checkLoginUser();
    // this.getWxSign();
    if (!getToken() && this.isLogin) {
      // return
      this.$router.replace({
        path: "/sign_in_write",
        query: {
          deptId: this.$route.query.deptId
        }
      })
    } else {
      if (window.localStorage.getItem("signUserInfo")) {
        this.userInfo = JSON.parse(window.localStorage.getItem("signUserInfo"));
      }

      this.getFamilyList();
    }

  },
  methods: {
    checkLoginUser() {
      getLoginUserInfo().then((res) => {
        if (res.code == 200) {
          console.log("登录校验成功")
          this.isLogin = true;
        } else {
          console.log("退出重新登录");
          try {
            const storage = window.localStorage
            storage.clear()
          } catch (err) {
            console.log("清理localStorage失败:" + err);
          }
          try {
            console.log("清理token");
            removeToken();
            removeWxUserinfoCookies();
          } catch (err) {
            console.log("清理token失败:" + err);
          }
        }
      });
    },
    // 获取就诊人列表
    getFamilyList() {
      var data = {
        isDefault: "0",
      };
      getPatientList(data).then((res) => {
        if (res.code == 200) {
          this.patiList = res.data;
          if (res.data.length == 0) {
            this.$router.replace({
              path: "/sign_in_write",
              query: {
                deptId: this.$route.query.deptId
              }
            })
            return
          }
          if (this.userInfo) {
            this.idx = this.userInfo.hospPatientId;
          } else {
            res.data.forEach((element) => {
              if (element.isDefault == 1) {
                this.idx = element.hospPatientId;
                this.userInfo = element
              }
            });
          }
        }
      });
    },
    getWxSign() {
      getWxSign({
        url: window.location.href,
      }).then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表
        });
        wx.ready(function () {
          console.log("ready");
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });
        wx.error(function (res) {
          console.log("error:" + res);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        });

      });
    },
    goScan() {
      console.log(this.userInfo)
      if (!this.userInfo.idNo) {
        alert("请选择患者!")
        return
      }
      // this.scanFun(this.userInfo.idNo)
      window.localStorage.setItem("signUserInfo", JSON.stringify(this.userInfo));
      // return
      this.$router.push({
        path: "/sign_in_index",
        query: {
          idNo: this.userInfo.idNo,
          deptQrCode: this.$route.query.deptId
        }
      })
    },

    selectPati(index, item) {
      this.idx = item.hospPatientId;
      this.userInfo = item

    },
  },
};
</script>
<style scoped>
.pati_box {
  padding: 1rem;
  width: calc(100% - 2rem);
}

.pati_box_item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.75rem 0.9375rem 0.75rem 0.9375rem;
  width: calc(100% - 1.875rem);
  /* height: 6.25rem; */
  background: rgba(255, 255, 255, 1);
  border: 0.0625rem solid #fff;
  box-shadow: 0.00rem 0.00rem 0.9375rem 0.00rem rgba(174, 206, 254, 0.3);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.pati_box_item .user {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.8125rem;
}

.pati_box_item .userImg {
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  margin-right: 0.5625rem;
}

.pati_box_item .qrImg {
  width: 1.875rem;
  height: 1.875rem;
}

.pati_box_item .selectImg {
  width: 1.5625rem;
  height: 1.4375rem;
  position: absolute;
  right: -0.06rem;
  top: -0.06rem;
}

.active {
  border: 0.06rem solid rgba(54, 153, 255, 1);
}

.scanBtn {
  width: 11.63rem;
  height: 2.75rem;
  background: #448EFF;
  border-radius: 0.19rem;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 2.75rem;
  text-align: center;
  margin: 5rem auto;
}

.signCon {
  width: calc(100% - 2rem);
  margin: 0 1rem;
  position: fixed;
  line-height: 2.75rem;
  bottom: 1rem;
  text-align: center;
  height: 2.75rem;
  background: #FFFFFF;
  border: 0.06rem solid #448EFF;
  border-radius: 0.19rem;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #448EFF;
}
</style>
